<template>
  <div class="cropperMain">
    <div class="mpvue-cropper">
      <mpvue-cropper ref="cropper" :option="cropperOpt" @ready="cropperReady" @beforeDraw="cropperBeforeDraw"
        @beforeImageLoad="cropperBeforeImageLoad" @beforeLoad="cropperLoad">
      </mpvue-cropper>
    </div>

    <div class="cropper-bottom">
      <div class="cropper-buttons">
        <div class="upload btn" @tap="uploadTap">
          重新选择
        </div>
        <div class="getCropperImage btn" @tap="getCropperImage">
          确定
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import MpvueCropper from 'mpvue-cropper'
  import config from '../../../../static/config.js'
  import util from '../../../../static/utils/util.js'

  let wecropper

  const device = wx.getSystemInfoSync()
  const width = device.windowWidth
  const height = device.windowHeight - 50

  export default {
    data() {
      return {
        cropperOpt: {
          id: 'cropper',
          targetId: 'targetCropper',
          pixelRatio: device.pixelRatio,
          width,
          height,
          scale: 2.5,
          zoom: 8,
          cut: {
            x: (width - 300) / 2,
            y: (height - 350) / 2,
            width: 300,
            height: 350
          },
          boundStyle: {
            color: '#04b00f',
            mask: 'rgba(0,0,0,0.8)',
            lineWidth: 1
          }
        },
        src: '',
        faceUrl: '',
        type: 0, //类型：0返回图片地址，1调用人脸上传接口
      }
    },

    components: {
      MpvueCropper
    },

    methods: {
      cropperReady(...args) {
        console.log('cropper ready!')
      },
      cropperBeforeImageLoad(...args) {
        console.log('before image load')
      },
      cropperLoad(...args) {
        console.log('image loaded')
      },
      cropperBeforeDraw(...args) {
        // Todo: 绘制水印等等
      },
      uploadTap() {
        wx.chooseImage({
          count: 1, // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: (res) => {
            const src = res.tempFilePaths[0]
            //  获取裁剪图片资源后，给data添加src属性及其值

            wecropper.pushOrigin(src)
          }
        })
      },
      getCropperImage() {
        var self = this;
        wecropper.getCropperImage({
            original: true
          })
          .then((src) => {
            console.warn('src', src) //裁剪完成，进行上传图片的操作
            wx.showLoading({
              title: '',
              mask: true,
              duration: 800
            })
            util.uploadFile(src).then((res) => {
              var param = res;
              self.faceUrl = param.filePath;
              var params = {
                faceSwitch: 1,
                faceUrl: self.faceUrl,
              }
              self.faceSwitch(params);
              // self.onSubFace();
            })
          })
          .catch(e => {
            console.error('获取图片失败')
          })
      },
      faceSwitch(params, type = 0) {
        var self = this;
        var paramUrl = util.stringifyQs(params)
        util.wxRequestPro('/UserServer/owner/info/faceSwitch?' + paramUrl, {}, 'PUT')
          .then((res) => {
            console.warn('faceSwitch', res)
            wx.showToast({
              title: "图片上传成功",
              icon: 'none'
            });
            setTimeout(() => {
              wx.navigateBack()
            }, 300)
          })
      },
    },
    onLoad(options) {
      var src = options.src
      this.src = src;
      if (options.type) {
        this.type = options.type
      }
    },
    mounted() {
      wecropper = this.$refs.cropper
      // console.warn('this.src',this.src)
      if (this.src) {
        wecropper.pushOrigin(this.src)
      }
      setTimeout(() => {

      }, 500)
    }

  }
</script>

<style>
  .cropperMain{

  }
  .cropper-wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #e5e5e5;
  }

  .mpvue-cropper {
    width: 750rpx;
    height:1280rpx;
    margin-top: -120rpx;
    /* padding: 10rpx; */
    background-color: #1086FF;
    background-color: rgba(0, 0, 0);
  }

  .cropper-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0rpx;
    /* background-color: blue; */
    z-index: 999999 !important;

  }

  .cropper-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    left: 0;
    height: 110rpx;
    line-height: 110rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.95);
    text-align: center;
    /* border: 1rpx solid red; */
  }

  .getCropperImage {
    background-color: #04b00f;
  }

  .cropper {
    position: absolute;
    top: 0;
    left: 0;
  }

  .btn {
    position: relative;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 30rpx;
    border-radius: 4rpx;
    color: #ffffff;
  }

  .btn::after {
    position: absolute;
    content: '';
    top: -32rpx;
    right: -20rpx;
    bottom: -20rpx;
    left: -32rpx;
    border: 1rpx solid transparent;
  }
</style>
